<template>
	<div class="statusTip">
		<a-spin :tip="loadingText" v-if="status == 0"></a-spin>
		<div class="noData" v-if="status == 1">
			<p>{{ emptyText }}</p>
		</div>
		<div class="timeout" v-if="status == 2" @click="retry">
			<p>{{ timeoutText }}</p>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	status: {
		type: Number,
		default: 0
	},
	loadingText: {
		type: String,
		default: '正在努力加载中...'
	},
	emptyText: {
		typeof: String,
		default: '暂无数据！'
	},
	timeoutText: {
		typeof: String,
		default: '网络超时，请点击重试！'
	}
});
const emit = defineEmits(['onRetry']);
const retry = () => {
	emit('onRetry');
};
</script>

<style lang="less" scoped>
.statusTip {
	height: 100%;
	width: 100%;
	position: relative;
	white-space: nowrap;
	:deep(.ant-spin) {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.noData,
	.timeout {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		color: '#000';
		text-align: center;
		& > p {
			line-height: 0;
		}
	}
}
</style>
